import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '@/views/home/index.vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export const mainRouter = <any>[
  {
    path: '/main',
    name: '首页',
    component: () => import('@/views/main/home/index.vue'),
    meta: {
      title: '首页',
      icon: 'icon-home',
    },
  },
  {
    path: '/elements',
    component: () => import('@/views/main/elements/index.vue'),
    // redirect: '/elements/button',
    name: 'elements',
    meta: {
      title: '组件',
      icon: 'icon-zujian'
    },
    children: [
      {
        path: '/elements/button',
        name: 'button',
        component: () => import('@/views/main/elements/button/index.vue'),
        meta: {
          title: '按钮',
          parent: 'elements',
          icon: '',
        }
      }
    ]
  },
  {
    path: '/charts',
    component: () => import('@/views/main/charts/index.vue'),
    redirect: "/charts/line",
    name: 'charts',
    meta: {
      title: '图表',
      icon: 'icon-tubiao'
    },
    children: [
      {
        path: '/charts/line',
        name: 'line',
        component: () => import('@/views/main/charts/line/index.vue'),
        meta: {
          title: '折线图',
          parent: 'charts',
          icon: ''
        }
      },
      {
        path: '/charts/bar',
        name: 'bar',
        component: () => import('@/views/main/charts/bar/index.vue'),
        meta: {
          title: '柱状图',
          parent: 'charts',
          icon: ''
        }
      },
      {
        path: '/charts/pei',
        name: 'pei',
        component: () => import('@/views/main/charts/pei/index.vue'),
        meta: {
          title: '饼图',
          parent: 'charts',
          icon: ''
        }
      },
    ]
  },
  {
    path: '/animation',
    component: () => import('@/views/main/animation/index.vue'),
    name: 'animation',
    meta: {
      title: '动画',
      icon: 'icon-donghua'
    },
  },
  {
    path: '/maps',
    component: () => import('@/views/main/maps/index.vue'),
    name: 'maps',
    meta: {
      title: '地图',
      icon: 'icon-ditu'
    },
  },
  {
    path: '/navigation',
    component: () => import('@/views/main/navigation/index.vue'),
    name: 'navigation',
    meta: {
      title: '导航网站',
      icon: 'icon-daohang'
    },
  },
  {
    path: '/frontend',
    component: () => import('@/views/main/frontend/index.vue'),
    name: 'frontend',
    meta: {
      title: '前端',
      icon: 'icon-WEBqianduan'
    }
  },
  {
    path: '/configure',
    component: () => import('@/views/main/configure/index.vue'),
    name: 'configure',
    meta: {
      title: '配置',
      icon: 'icon-peizhi'
    }
  }
]

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: '首页',
    redirect: '/main',
    component: Home,
    meta: { transition: 'zoom' },
    children: [
      ...mainRouter,
      {
        path: '/:pathMatch(.*)',
        name: '404',
        component: () => import('@/views/error/404.vue'),
        hidden: true,
      },
    ],
  },
  {
    path: '/login',
    name: '登录',
    component: () => import('@/views/login/index.vue'),
    meta: { transition: 'zoom' },
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// mainRouter.map((item: any) => router.addRoute(item))

NProgress.configure({
  showSpinner: false, // 进度环显示
  ease: 'ease', // 调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）
  speed: 400, // 动画速度（单位ms）
  minimum: 0.3, // 设置最低百分比
  trickleSpeed: 200 // 调整延缓增加进度频率（单位ms）
  // parent: '#app' // 挂载节点
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login') { return next() }
  NProgress.start()
  NProgress.set(0.4) // 通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1
  next()
  NProgress.done()
})

router.afterEach(() => {
  NProgress.done()
})

export default router
